<template>
  <div>
    <Header style="background-color: #f0f8ff;height: 60px;"/>
  </div>
  <div class="create">
    <span class="create-word" @click="show(1)">新建文本</span><br><br>
    <span class="create-excel" @click="show(2)">新建表格</span><br><br>
    <span class="create-demonstrate" @click="show(3)">新建演示</span>
  </div>
  <div class="user-word-list">


    <table class="el-table__body" style="cursor: pointer">
      <tr v-for="file in userWordList" :key="file.id" >
        <td rowspan="1" colspan="1" width="50">
          <div @click="documentsEditing(file)">
            <img v-if="file.fileType==1" src="@/assets/word.png" alt="" width="50" height="50">
            <img v-else-if="file.fileType==2" src="@/assets/excel.png" alt="" width="50" height="50">
            <img v-else src="@/assets/demonstrate.png" alt="" width="50" height="50">
          </div>
        </td>
        <td class="el-table_2_column_5 el-table__cell" rowspan="1" colspan="1">
          <div class="cell" @click="documentsEditing(file)">
            <span data-v-38516d1e="">{{ file.fileName }}{{}}<br><span
                style="font-size: 10px;color:#949494;">{{ file.alterTime }}</span></span>
          </div>
        </td>
        <td class="el-table_2_column_6 el-table__cell" rowspan="1" colspan="1">
          <div class="cell" @click="documentsEditing(file)">{{ user.userName }}</div>
        </td>
      </tr>
    </table>


    <el-dialog
        v-model="dialogFormVisible"
        width="500px">
      <el-form status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="文件名称" prop="time">
          <el-input type="text" v-model="form.fileName" placeholder="请输入文件名称"/>
        </el-form-item>
        <el-form-item style="right: 10px">
          <el-button type="primary" @click="submit(1)">确定</el-button>
          <el-button @click="submit(2)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>

</template>

<script setup>
import Header from '@/components/Header'
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {useRouter, useRoute} from "vue-router";

const proxy = getCurrentInstance().appContext.config.globalProperties;
const router = useRouter();  // 跳转url
const route = useRoute();  // 获取url参数


const user = ref(proxy.$cookie.get('userInfo'))
const dialogFormVisible = ref(false);

const userWordList = ref([])
onMounted(()=>{
  proxy.$http({
    method: "POST",
    url: proxy.$url + "/user_file_info/list",
    data: {userId:user.value.id},
    headers: {
      "token": proxy.$cookie.get("token")
    }

  }).then(response => {
    if (response.data.code === 200) {
      proxy.$message.success(response.data.msg)
      userWordList.value = response.data.data

    } else {
      proxy.$message.error(response.data.msg);
    }
  })
})

const documentsEditing = (file) => {
  router.push({path:"/documents/editing",query:file});
  // window.

}


const show = (num) => {
  switch (num) {
    case 1:
      dialogFormVisible.value = true
      form.value = {
        userId: user.value.id,
        fileName: '',
        fileType: 1,
        state: 1,
        alterTime: proxy.$dayjs(new Date().getTime()).format("YYYY-MM-DD HH:mm:ss")
      }
      break
    case 2:
      dialogFormVisible.value = true
      form.value = {
        userId: user.value.id,
        fileName: '',
        fileType: 2,
        state: 1,
        alterTime: proxy.$dayjs(new Date().getTime()).format("YYYY-MM-DD HH:mm:ss")
      }
      break
    case 3:
      dialogFormVisible.value = true
      form.value = {
        userId: user.value.id,
        fileName: '',
        fileType: 3,
        state: 1,
        alterTime: proxy.$dayjs(new Date().getTime()).format("YYYY-MM-DD HH:mm:ss")
      }
      break
  }

}
const submit = (num) => {
  switch (num) {
    case 1:
      let typeList = [0,".docx", ".xlsx", ".pdf"]
      const fileType = form.value.fileType
      form.value.fileName += typeList[fileType]

      proxy.$http({
        method: "POST",
        url: proxy.$url + "/user_file_info/add",
        data: form.value,
        headers: {
          "token": proxy.$cookie.get("token")
        }

      }).then(response => {
        if (response.data.code === 200) {
          proxy.$message.success(response.data.msg)
          dialogFormVisible.value = false
          let res = response.data.data

          console.log(res)
          router.push({path:"/documents/editing",query:res})



        } else {
          proxy.$message.error(response.data.msg);
        }
      })
      break
    case 2:
      dialogFormVisible.value = false
      form.value = {
        userId: user.value.id,
        fileName: '',
        fileType: '',
        state: 1,
        alterTime: proxy.$dayjs(new Date().getTime()).format("YYYY-MM-DD HH:mm:ss")
      }
      break
  }

}
const form = ref(
    {
      userId: user.value.id,
      fileName: '',
      fileType: '',
      state: 1,
      alterTime: proxy.$dayjs(new Date().getTime()).format("YYYY-MM-DD HH:mm:ss")
    }
)


</script>

<style scoped>

.user-word-list {
  padding-left: 250px;
  padding-top: 50px;
}

.create {
  float: left;
  width: 150px;
  height: 500px;
  padding-left: 50px;
  padding-top: 50px;
  border: 3px solid #aaa4c4;
}

.create span {
  background-size: 28px;
  background-repeat: no-repeat;
  background-color: #d2edff;
  border-radius: 5px;
  font-weight: 500;
  font-size: 20px;
  padding-left: 30px;
  padding-right: 5px;
  cursor: pointer;
}

.create-word {
  background-image: url(~@/assets/word.png);
}

.create-excel {
  background-image: url(~@/assets/excel.png);
}

.create-demonstrate {
  background-image: url(~@/assets/demonstrate.png);
}


.el-table__body {
  table-layout: fixed;
  width: 100%;
}

.el-table__body tr {
  background-color: #ffffff0f;

}
</style>